import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { Input, Space } from 'antd';
import { observer } from 'mobx-react';

import RbProTable, { RbProTableStore } from '@components/RbProTable';
import { Content } from '@components/Page';

import { TableAlignType } from '@/enumTypes/table';
import { getDictionaryListApi } from '@services/service';
import { isArray, isNil } from 'lodash';
import { generateCommonSelect } from '@utils/renderer';

const store = new RbProTableStore();

const TaskOwnList: FC = () => {
  // 字典数据
  const [statusList, setStatusList] = useState<any[]>([]);

  /** 查询设置字典数据 */
  const handleQueryDictionaryList = useCallback(() => {
    getDictionaryListApi(['RB_PROCESS_STATUS']).then((res: any) => {
      if (isArray(res)) {
        const [statusList = []] = res || [];
        setStatusList(statusList);
      }
    });
  }, []);

  useEffect(() => {
    handleQueryDictionaryList();
  }, []);
  /** 查询条配置列表 */
  const queryFromItems = useMemo(
    () => [
      {
        name: 'modelName',
        label: '流程名称',
        children: <Input />
      },
      {
        name: 'taskName',
        label: '任务节点',
        children: <Input />
      },
      {
        name: 'businessStatus',
        label: '流程状态',
        children: generateCommonSelect(statusList)
      }
    ],
    [statusList]
  );

  /** 表格列配置 */
  const columns = useMemo(
    () => [
      {
        title: '流程名称',
        dataIndex: 'modelName',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '当前节点',
        dataIndex: 'taskName',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '审批状态',
        dataIndex: 'businessStatus',
        align: TableAlignType.center,
        width: 140,
        render: (value: any) => {
          return (
            !isNil(value) && (
              <Space>
                {/*TODO: 这里应该直接查询字典，而不是穷举，因为字典可能很大*/}
                {/*<Badge status={Status.enable === value ? 'success' : 'error'} />*/}
                {value === 1
                  ? '审批中'
                  : value === 2
                    ? '已终止'
                    : value === 3
                      ? '已完成'
                      : value === 4
                        ? '已取消'
                        : ''}
              </Space>
            )
          );
        }
      },
      {
        title: '任务完成时间',
        dataIndex: 'endTime',
        align: TableAlignType.center,
        sorter: true,
        width: 180
      },
      {
        title: '发起时间',
        dataIndex: 'startTime',
        align: TableAlignType.center,
        sorter: true,
        width: 180
      },
      {
        title: '持续时间',
        dataIndex: 'duration',
        align: TableAlignType.center,
        sorter: true,
        width: 180
      }
    ],
    [statusList]
  );
  return (
    <Content>
      <RbProTable
        rowKey="id"
        columns={columns}
        store={store}
        actionUrl="/flowable/procinst/ownList"
        sticky
        selectionType
        queryConfig={{
          queryFromItems,
          queryFormat: true
        }}
        toolBarRender={() => []}
      />
    </Content>
  );
};

export default observer(TaskOwnList);
